<template>
  <div class="dashboard-container">
    <!-- 第一步：提供结构 -->
    <div id="progressbar"></div>
    <div id="scrollPath"></div>
    <el-row :gutter="20" style="margin-bottom: 20px">
      <!-- 用户 -->
      <el-col :span="12">
        <div class="active">
          <div class="user">
            <div class="left">
              <i class="el-icon-user-solid size" style="color: #ffdc60"></i>
            </div>
            <div class="right">
              <span class="title">用户</span>
              <br />
              <CountTo
                :startVal="0"
                :endVal="100"
                :duration="2000"
                class="num"
              ></CountTo>
            </div>
            <div class="more">
              <el-tooltip
                class="item tooltip"
                effect="dark"
                content="更多"
                placement="bottom"
              >
                <el-button
                  style="border: none"
                  icon="el-icon-share"
                  @click="$router.push('/example/user')"
                ></el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="chart">
            <div
              class="chart1"
              ref="chart4"
              style="width: 100%; height: 100%"
            ></div>
          </div>
        </div>
      </el-col>

      <!-- 日历 -->
      <el-col :span="12">
        <div class="active">
          <el-calendar v-model="value"></el-calendar>
        </div>
      </el-col>
    </el-row>

    <el-row
      :gutter="20"
      type="flex"
      justify="space-between"
      style="margin-right: -40px"
    >
      <!-- 第一个 -->
      <el-col :span="8">
        <div class="active">
          <div class="gard">
            <div class="left">
              <i class="el-icon-s-grid size" style="color: #0096ff"></i>
            </div>
            <div class="right">
              <p class="title">物料属性映射</p>
              <h3 class="num">
                <CountTo
                  :startVal="0"
                  :endVal="100"
                  :duration="2000"
                  class="num"
                ></CountTo>
              </h3>
            </div>
            <div class="more">
              <el-tooltip
                class="item tooltip"
                effect="dark"
                content="更多"
                placement="bottom"
              >
                <el-button
                  style="border: none"
                  icon="el-icon-share"
                  @click="$router.push('/example/mapping')"
                ></el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="table">
            <el-table :data="tableData" height="200" border style="width: 100%">
              <el-table-column prop="date" label="名称"></el-table-column>
              <el-table-column prop="name" label="类型"></el-table-column>
              <!-- <el-table-column prop="address" label="地址"></el-table-column> -->
            </el-table>
            <!-- <div class="chart1" ref="chart1" style="width:100%;height:100%"></div> -->
          </div>
        </div>
      </el-col>

      <!-- 第二个 -->
      <el-col :span="8">
        <div class="active">
          <div class="gard">
            <div class="left">
              <i class="el-icon-s-grid size" style="color: #6495ed"></i>
            </div>
            <div class="right">
              <p class="title">物料分类属性映射</p>
              <h3 class="num">
                <CountTo
                  :startVal="0"
                  :endVal="100"
                  :duration="2000"
                  class="num"
                ></CountTo>
              </h3>
            </div>
            <div class="more">
              <el-tooltip
                class="item tooltip"
                effect="dark"
                content="更多"
                placement="bottom"
              >
                <el-button
                  style="border: none"
                  icon="el-icon-share"
                  @click="$router.push('/example/classify')"
                ></el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="table">
            <!-- <div class="chart1" ref="chart2" style="width:100%;height:100%"></div> -->
            <el-table :data="tableData" height="200" border style="width: 100%">
              <el-table-column prop="date" label="名称"></el-table-column>
              <el-table-column prop="name" label="类型"></el-table-column>
              <!-- <el-table-column prop="address" label="地址"></el-table-column> -->
            </el-table>
          </div>
        </div>
      </el-col>

      <!-- 第三个 -->
      <el-col :span="8">
        <div class="active" style="width: 400px">
          <div class="gard">
            <div class="left">
              <i class="el-icon-s-grid size" style="color: #89cff0"></i>
            </div>
            <div class="right">
              <p class="title">物料分类</p>
              <h3 class="num">
                <CountTo
                  :startVal="0"
                  :endVal="100"
                  :duration="2000"
                  class="num"
                ></CountTo>
              </h3>
            </div>
            <div class="more">
              <el-tooltip
                class="item tooltip"
                effect="dark"
                content="更多"
                placement="bottom"
              >
                <el-button
                  style="border: none"
                  icon="el-icon-share"
                  @click="$router.push('/data/goods')"
                ></el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="table">
            <!-- <div class="chart1" ref="chart3" style="width:100%;height:100%"></div> -->
            <el-table :data="tableData" height="200" border style="width: 100%">
              <el-table-column prop="date" label="名称"></el-table-column>
              <el-table-column prop="name" label="类型"></el-table-column>
              <!-- <el-table-column prop="address" label="地址"></el-table-column> -->
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- <div class="chart">
      <div class="chart1" ref="chart2" style="width:100%;height:100%"></div>
    </div>-->

    <el-row :gutter="30" style="margin-top: 20px; margin-right: -20px">
      <!-- 第一个滚动列表 -->
      <el-col :span="6">
        <div class="content active">
          <div class="header">
            <div style="display: flex; justify-content: space-between">
              <span>补给方式</span>
              <el-link
                type="primary"
                :underline="false"
                @click="$router.push('/data/supply')"
                >更多</el-link
              >
            </div>
          </div>
          <div class="center">
            <div>
              <span class="name">Item 1</span>
              <span class="num">Item 2</span>
            </div>
            <div class="scroll-container">
              <ul class="item-list">
                <li v-for="ele in 10" :key="ele">
                  <span class="item1">Item 1</span>
                  <span class="item2">Item 2</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- <div class="bottom">下</div> -->
        </div>
      </el-col>

      <!-- 第二个滚动列表 -->
      <el-col :span="6">
        <div class="content active">
          <div class="header">
            <!-- <span>库存单位</span> -->
            <div style="display: flex; justify-content: space-between">
              <span>库存单位</span>
              <el-link
                type="primary"
                :underline="false"
                @click="$router.push('/data/supply')"
                >更多</el-link
              >
            </div>
          </div>
          <div class="center">
            <div>
              <span class="name">Item 1</span>
              <span class="num">Item 2</span>
            </div>
            <div class="scroll-container">
              <ul class="item-list">
                <li v-for="ele in 10" :key="ele">
                  <span class="item1">Item 1</span>
                  <span class="item2">Item 2</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- <div class="bottom">下</div> -->
        </div>
      </el-col>

      <!-- 第三个滚动列表 -->
      <el-col :span="6">
        <div class="content active">
          <div class="header">
            <!-- <span>颜色</span> -->
            <div style="display: flex; justify-content: space-between">
              <span>颜色</span>
              <el-link
                type="primary"
                :underline="false"
                @click="$router.push('/data/color')"
                >更多</el-link
              >
            </div>
          </div>
          <div class="center">
            <div>
              <span class="name">Item 1</span>
              <span class="num">Item 2</span>
            </div>
            <div class="scroll-container">
              <ul class="item-list">
                <li v-for="ele in 10" :key="ele">
                  <span class="item1">Item 1</span>
                  <span class="item2">Item 2</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- <div class="bottom">下</div> -->
        </div>
      </el-col>

      <!-- 第四个滚动列表 -->
      <el-col :span="6">
        <div class="content active">
          <div class="header">
            <!-- <span>表面处理</span> -->
            <div style="display: flex; justify-content: space-between">
              <span>表面处理</span>
              <el-link
                type="primary"
                :underline="false"
                @click="$router.push('/data/surface')"
                >更多</el-link
              >
            </div>
          </div>
          <div class="center">
            <div>
              <span class="name">Item 1</span>
              <span class="num">Item 2</span>
            </div>
            <div class="scroll-container">
              <ul class="item-list">
                <li v-for="ele in 10" :key="ele">
                  <span class="item1">Item 1</span>
                  <span class="item2">Item 2</span>
                </li>
              </ul>
            </div>
          </div>
          <!-- <div class="bottom">下</div> -->
        </div>
      </el-col>
    </el-row>

    <!-- <div class="chart">
      <div class="chart1" ref="chart1" style="width:100%;height:100%"></div>
    </div>-->
    <!-- <div id="mapContainer" ref="map" style="width: 800px; height: 600px;"></div> -->
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import CountTo from "vue-count-to";
import * as echarts from "echarts"; // 引入所有的echarts
import { GetAllUserAPI } from "@/api/dashboard";
export default {
  name: "Dashboard",
  components: {
    CountTo,
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      value: new Date(),
    };
  },
  created() {
    this.GetAllUser();
  },
  mounted() {
    // 第三步：添加JS，实现滚动动态调整进度条高度
    // 1. 获取进度条元素
    let progress = document.getElementById("progressbar");
    // 2. 最大可滚动高度 = 全部内容高度 - 可视区高度
    let totalHeight = document.body.scrollHeight - window.innerHeight;
    // 3. 监听滚动
    window.onscroll = function () {
      // 4. 计算进度条高度百分比
      //    进度条高度百分比 = (已滚动的 Y 距离 / 最大可滚动高度) * 100
      let progressHeight = (window.pageYOffset / totalHeight) * 100;
      progress.style.height = progressHeight + "%";
    };

    // this.chart1 = echarts.init(this.$refs.chart1);
    // this.chart2 = echarts.init(this.$refs.chart2);
    // this.chart3 = echarts.init(this.$refs.chart3);
    this.chart4 = echarts.init(this.$refs.chart4);
    // this.chart5 = echarts.init(this.$refs.map);
    // this.chart1.setOption({
    //   xAxis: {
    //     type: "category",
    //     data: ["1", "2", "3", "4", "5", "6", "7"]
    //   },
    //   grid: {
    //     show: false, // 控制网格是否显示，默认为true显示网格
    //     borderColor: "transparent", // 设置网格边框颜色为透明，即隐藏网格线
    //     bottom: 0, // 可根据需要调整网格位置，这里设置为0表示网格位于底部
    //     containLabel: true // 网格区域是否包含坐标轴的刻度标签，默认为 false 不包含
    //   },
    //   yAxis: {
    //     type: "value"
    //   },
    //   // series: [
    //   //   {
    //   //     data: [120, 200, 150, 80, 70, 110, 130],
    //   //     type: "bar"
    //   //   }
    //   // ],
    //   series: [
    //     {
    //       type: "bar",
    //       data: [10, 20, 30, 40, 50, 60, 70],
    //       itemStyle: {
    //         normal: {
    //           // 普通状态下的样式
    //           color: "#37a2da" // 柱状图的颜色
    //         },
    //         emphasis: {
    //           // 鼠标放上去的样式
    //           color: "#ffdb5c", // 鼠标放上去时柱状图的颜色
    //           shadowBlur: 10,
    //           shadowOffsetX: 0,
    //           shadowColor: "rgba(0, 0, 0, 0.5)"
    //         }
    //       }
    //     }
    //   ]
    // });
    // this.chart2.setOption({
    //   xAxis: {
    //     type: "category",
    //     data: ["1", "2", "3", "4", "5", "6", "7"]
    //   },
    //   grid: {
    //     show: false, // 控制网格是否显示，默认为true显示网格
    //     borderColor: "transparent", // 设置网格边框颜色为透明，即隐藏网格线
    //     bottom: 0, // 可根据需要调整网格位置，这里设置为0表示网格位于底部
    //     containLabel: true // 网格区域是否包含坐标轴的刻度标签，默认为 false 不包含
    //   },
    //   yAxis: {
    //     type: "value"
    //   },
    //   series: [
    //     {
    //       type: "bar",
    //       data: [10, 20, 30, 40, 50, 60, 70],
    //       itemStyle: {
    //         normal: {
    //           // 普通状态下的样式
    //           color: "#97a2da" // 柱状图的颜色
    //         },
    //         emphasis: {
    //           // 鼠标放上去的样式
    //           color: "#fccfsc", // 鼠标放上去时柱状图的颜色
    //           shadowBlur: 10,
    //           shadowOffsetX: 0,
    //           shadowColor: "rgba(0, 22, 33, 0.5)"
    //         }
    //       }
    //     }
    //   ]
    // });
    // this.chart3.setOption({
    //   xAxis: {
    //     type: "category",
    //     data: ["1", "2", "3", "4", "5", "6", "7"]
    //   },
    //   grid: {
    //     show: false, // 控制网格是否显示，默认为true显示网格
    //     borderColor: "transparent", // 设置网格边框颜色为透明，即隐藏网格线
    //     bottom: 0, // 可根据需要调整网格位置，这里设置为0表示网格位于底部
    //     containLabel: true // 网格区域是否包含坐标轴的刻度标签，默认为 false 不包含
    //   },
    //   yAxis: {
    //     type: "value"
    //   },
    //   series: [
    //     {
    //       type: "bar",
    //       data: [10, 20, 30, 40, 50, 60, 70],
    //       itemStyle: {
    //         normal: {
    //           // 普通状态下的样式
    //           color: "#cfd98a" // 柱状图的颜色
    //         },
    //         emphasis: {
    //           // 鼠标放上去的样式
    //           color: "#cfcx9a", // 鼠标放上去时柱状图的颜色
    //           shadowBlur: 10,
    //           shadowOffsetX: 0,
    //           shadowColor: "rgba(0, 0, 0, 0.5)"
    //         }
    //       }
    //     }
    //   ]
    // });
    this.chart4.setOption({
      tooltip: {
        trigger: "item",
      },
      legend: {
        bottom: "2%",
        left: "center",
      },
      series: [
        {
          name: "User From",
          type: "pie",
          radius: ["35%", "62%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            formatter(param) {
              // correct the percentage
              // return param.name + " (" + param.value / 0.6 + "%)";
              return param.name + " (" + param.value + ")";
            },
            // position: "center"
          },
          // emphasis: {
          //   label: {
          //     show: true,
          //     fontSize: 40,
          //     fontWeight: "bold"
          //   }
          // },
          labelLine: {
            show: true,
          },
          data: [
            { value: 10, name: "user1" },
            { value: 20, name: "user2" },
            { value: 30, name: "user3" },
          ],
        },
      ],
    });
  },
  methods: {
    async GetAllUser() {
      const res = await GetAllUserAPI();
    },
  },
  computed: {
    // ...mapGetters([
    //   'name'
    // ])
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  .active {
    // box-sizing: content-box;
    background-color: #fff;

    // background-color: #fff;
    transition: transform 0.7s ease;
    // box-shadow: 10px 10px 10px rgba(0, 0, 0, 0);
    // box-shadow: -4px 4px 8px rgba(0, 0, 0, 0);
    box-shadow: -4px 4px 8px 4px rgba(0, 0, 0, 0);
    overflow: hidden;

    ::v-deep .el-calendar-day {
      text-align: center;
    }
  }
  .active:hover {
    // background-color: #ccc;
    transform: translateY(-7px);
    // box-shadow: 6px 6px 3px gray;
    // box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.2);
    // box-shadow: -4px 4px 4px rgba(0, 0, 0, 0.2);
    box-shadow: -4px 4px 8px 4px rgba(0, 0, 0, 0.15);
  }

  ::v-deep .el-calendar-day {
    height: 40px;
  }
  ::v-deep .el-calendar-table__row td,
  ::v-deep .el-calendar-table tr td:first-child,
  ::v-deep .el-calendar-table__row td.prev {
    border: none;
  }
}

.user {
  width: 620px;
  height: 100px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  .left {
    font-size: 75px;
  }

  .right {
    font-size: 25px;
    // margin: 0 auto;

    .title {
      font-size: 25px;
    }

    .num {
      font-size: 28px;
      font-weight: 700;
    }
  }
}

.chart {
  width: 620px;
  height: 282px;
  background-color: #fff;
}

.gard {
  width: 400px;
  height: 150px;
  padding: 20px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  // text-align: center;
  // line-height: 110px;

  .left {
    display: inline-block;
    width: 100px;
    height: 110px;
    text-align: center;
    // line-height: 80px;
    line-height: 140px;

    .size {
      font-size: 70px;
      // line-height: 120px;
    }
  }

  .right {
    display: inline-block;
    width: 100px;
    text-align: center;

    .title {
      color: #868e96;
      font-size: 12px;
    }

    .num {
      font-size: 25px;
    }
  }

  .more {
    display: inline-block;
    width: 40px;
    // margin-left: 20px;
    // line-height: 110px;
  }
}

.table {
  // width: 400px;
}

.table:hover {
  // box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.2);
}

.content {
  width: 300px;
  height: 150px;
  padding: 12px;
  background-color: #fff;

  .header,
  .center,
  .bottom {
    display: inline-block;
    width: 260px;
    height: 36px;
    line-height: 36px;
  }

  .header {
    span {
      font-size: 12px;
      font-weight: 600;
    }
  }

  .center {
    padding: 0 20px;
    .scroll-container {
      height: 100%; /* 滚动容器的高度 */
      overflow: hidden; /* 隐藏超出容器高度的内容 */
    }

    .name {
      // margin-left: 5px;
    }
    .num {
      margin-left: 115px;
    }

    .item-list {
      margin: 0;
      padding: 0;
      list-style: none;
      animation: scroll 15s linear infinite; /* 定义动画属性 */

      .item1 {
      }
      .item2 {
        margin-left: 115px;
      }
    }
    .scroll-container:hover .item-list {
      animation-play-state: paused; /* 鼠标悬停时暂停动画 */
    }

    @keyframes scroll {
      0% {
        transform: translateY(0); /* 初始位置 */
      }
      100% {
        transform: translateY(-100%); /* 最终位置 */
      }
    }
  }
}

/* (4) 设置自定义滚动条的样式 并 定义动画 */
#scrollPath {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.05);
}
#progressbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  background: linear-gradient(to top, #008aff, #00ffe7);
  animation: animate 5s linear infinite;
}
/* 定义色调转换的动画 */
@keyframes animate {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(360deg);
  }
}

/* (5) 新建伪元素，设置光效 */
#progressbar::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #008aff, #00ffe7);
  filter: blur(10px);
}
</style>
